<template>
  <q-input
    filled
    v-model.trim="field.value"
    :label="field.label"
    lazy-rules
    :rules="field.rules ? field.rules : null"
    :readonly="field.readonly"
    ref="input"
    :class="[field.rules ? '' : 'q-pb-lg', 'input-' + field.name]"
    :autogrow="field.autogrow"
    :dense="field.dense !== undefined ? field.dense : false"
    :type="field.password ? 'password' : field.textarea ? 'textarea' : 'text'"
    :mask="field.mask ? field.mask : undefined"
    :fill-mask="!!field.mask"
    bottom-slots
    v-bind="$attrs"
  >
    <template v-slot:prepend v-if="field.prefix">
      {{ field.prefix }}
    </template>
    <template v-slot:append v-if="field.suffix">
      {{ field.suffix }}
    </template>
    <template v-slot:after v-if="field.btn && field.btn.fn && !field.readonly && (field.btn.enabled || field.btn.enabled === undefined)">
      <q-btn dense flat :label="field.btn.label || ''" :icon="field.btn.icon || undefined" :color="field.btn.color || undefined" @click="field.btn.fn(field)" />
    </template>
    <template v-slot:hint v-if="field.hint || field.compare">
      <div class="text-bold text-white bg-yellow-10" style="padding: 1px;" v-if="canShowCompare">
        {{ field.compare.label ? field.compare.label + '：' : ''}}{{field.compare.map ? field.compare.map.value : field.compare.value }}
      </div>
      <div v-if="field.hint">{{ field.hint }}</div>
    </template>
  </q-input>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'fieldInput',
  props: {
    field: {
      type: Object,
      default: () => {}
    },
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  emits: ['update:modelValue'],
  data () {
    return {

    }
  },
  methods: {
  },
  computed: {
    canShowCompare () {
      /*
        compare的值
        compare: {
          label, // 标题
          value, // 对比的值
          always // true-有数据就显示 false-值不同，再显示
        } */
      return this.field.compare && this.field.compare.value !== null && (this.field.compare.always || this.field.compare.value != this.field.value);
    }
  },
  watch: {
    'field.value' (val) {
      this.$emit('update:modelValue', val);
    }
  }
});
</script>
